<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<el-page-header content="审核详情" @back="$router.back()" />
			<div class="btnR" v-if="formData.status == 0 && formData.create_time">
				<el-button type="danger" @click="handleCheck(0)">举报不成立</el-button>
                <el-button type="primary" @click="handleCheck(1)">举报成立</el-button>
			</div>
		</el-card>
		<el-card class="mt-4 !border-none" header="内容信息" shadow="never">
			<el-form ref="formRef" class="ls-form" :model="formData" label-width="120px">
                <el-form-item label="举报对象：">
					<!-- <router-link
						v-perms="['dynamic.dynamic/infos']"
						:to="{ path: getRoutePath('user.user/circleAccusationDetail'), query: { id: formData.to_id } }"
					>
						12月13号 先不弄跳转用户详情
					</router-link> -->
					{{formData.to_real_name}}
				</el-form-item>
                <el-form-item label="举报理由：">{{ typeTxt(formData.type) }}</el-form-item>
				<el-form-item label="举报描述：">{{formData.desc}}</el-form-item>
                <el-form-item label="图片：">
					<el-image style="width: 58px; height: 58px;margin-right: 10px;"
						v-for="(item,index) in formData.attach_urls" :key="'image_urls'+index" 
						:src="item"
						:zoom-rate="1.2"
						:max-scale="7"
						:min-scale="0.2" 
						fit="contain"
						:preview-teleported="true"
						:initial-index="index"
						:preview-src-list="formData.attach_urls"></el-image>
				</el-form-item>
				<el-form-item label="举报人：">{{formData.from_real_name}}</el-form-item>
				<el-form-item label="举报时间：">{{formData.create_time}}</el-form-item>
				<el-form-item label="处理状态：">{{formData.status == 0 ? '处理中': formData.status == 1 ? '成立' : '不成立'}}</el-form-item>
			</el-form>
		</el-card>
		<el-card v-if="formData.status != 0" class="mt-4 !border-none" header="发布信息" shadow="never">
			<el-table size="large" :data="[formData]">
				<el-table-column label="举报成立" min-width="100" prop="status">
					<template #default="{ row }">
						<span v-if="row.status == 0"></span>
						<span v-else-if="row.status == 1">成立</span>
						<span v-else>不成立</span>
					</template>
				</el-table-column>
				<el-table-column label="处理意见" min-width="100" prop="reason" />
				<el-table-column label="处理措施" min-width="100" prop="dispose_result">
					<template #default="{ row }">
						<span v-if="row.dispose_result.length == 0">—</span>
						<div v-for="(item,index) in row.dispose_result" :key="index">{{ item == 1 ? '账号停用':'禁言7天' }}</div>
					</template>
				</el-table-column>
				<el-table-column label="处理人" min-width="100" prop="ad_name"/>
				<el-table-column label="处理时间" min-width="100" prop="check_time"/>
			</el-table>
		</el-card>
        
        <check_demand v-model:show="checkState.show" :value="checkState.value" @confirm="handleConfirmCheck"></check_demand>
	</div>
</template>

<script lang="ts" setup name="demandReviewDetail">
	import type { FormInstance } from 'element-plus'
	import { circleAccusationDetail, circleEstablish, circleUnEstablish } from '@/api/safe';
    import check_demand from './check_demand.vue'
	const route = useRoute()
	const formData:any = reactive({
		to_real_name: '',
        type: '',
        desc: '',
        attach_urls: [],
        from_real_name: '',
        create_time: '',
        status: '',
		reason: '',
		dispose_result: [],
		ad_name: '',
		check_time: '',
		to_id: ''
	})
    const checkState = reactive({
		show: false,
		value: ''
	})
    const handleConfirmCheck = async (res : any) => {
		console.log(res);
		if (res.type == 0) {
			await circleUnEstablish({ id: Number(route.query.id), reason: res.reason })
		} else if (res.type == 1) {
			await circleEstablish({ id: Number(route.query.id), ...res })
		}
		checkState.show = false
		getDetails()
	}

    const typeTxt = (num:any) => {
		return computed(():string=>{
			let txt = '';
			switch(num) {
            case 1: txt = '侮辱谩骂、网络暴力'; break;
            case 2: txt = '传播色情资源'; break;
            case 3: txt = '违法犯罪'; break;
            case 4: txt = '不实信息'; break;
            case 5: txt = '涉嫌欺诈'; break;
            case 6: txt = '政治敏感'; break;
            case 7: txt = '违规卖货、假冒商品'; break;
            case 8: txt = '未成年相关'; break;
            case 9: txt = '危害人身安全'; break;
            case 10: txt = '此账号可能被盗用了'; break;
            case 11: txt = '其他'; break;
            case 12: txt = '发布不当的内容和信息'; break;
            case 13: txt = '冒充他人'; break;
            case 14: txt = '侵犯权益'; break;
        }
			return txt;
		})
	}
	const handleCheck = (value : any) => {
		console.log(value)
		checkState.value = value;
		checkState.show = true
	}
	
	
	const formRef = shallowRef<FormInstance>()

	const getDetails = async () => {
		const data = await circleAccusationDetail({
			id: route.query.id
		})
		Object.keys(formData).forEach((key) => {
			//@ts-ignore
			formData[key] = data[key]
			// if( key=='image_urls' ){
			// 	console.log(data[key],123456);
			// 	formData[key] = data[key][0]
			// }
		})
	}

	getDetails()
</script>
<style scoped lang="scss">
	.btnR{
		position: absolute;
		right: 50px;
		top: 30px;
	}
</style>